<template>
	<view class="pay-success">
		<!-- 顶部 -->
		<view class="back-box">
			<view class="zfcg-box">
				<icon class="icon-zfcg"></icon>
				<view class="text-zfcg">
					<text>支付失败！</text>
					<text>很抱歉支付失败</text>
				</view>
			</view>
			<!-- 横线 -->
			<view class="line-background"></view>
			<!-- 复制内容 -->
			<view class="info-box">
				<view class="info-price">
					<text>￥</text>
					{{ total_fee }}
				</view>
				<view class="cxgm-box">
					很抱歉，购买联系方式失败请
					<text @click="bindBack">重新购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			total_fee: '' //金额
		};
	},
	onLoad(options) {
		this.total_fee = options.total_fee;
	},
	methods: {
		// 重新购买
		bindBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.back-box {
	position: relative;
	width: 100%;
	height: 300rpx;
	background: linear-gradient(180deg, #f85e4b 0%, #ffa78d 100%);
	.zfcg-box {
		color: #ffffff;
		display: flex;
		justify-content: center;
		padding-top: 70rpx;
		box-sizing: border-box;
		.icon-zfcg {
			width: 112rpx;
			height: 112rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-zfshibai.png) no-repeat;
			background-size: cover;
			margin-right: 36rpx;
		}
		.text-zfcg {
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 24rpx;
			& > text:nth-of-type(1) {
				font-size: 36rpx;
				font-weight: 500;
			}
		}
	}
	.line-background {
		width: 642rpx;
		height: 16rpx;
		background: #f8604d;
		border-radius: 18rpx;
		position: absolute;
		bottom: 44rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.info-box {
		width: 610rpx;
		height: 460rpx;
		padding: 60rpx 32rpx 121rpx;
		box-sizing: border-box;
		background: #ffffff;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -406rpx;
		.info-price {
			color: #333333;
			font-size: 80rpx;
			text-align: center;
			padding-bottom: 56rpx;
			border-bottom: 2rpx dashed rgba(151, 151, 151, 0.31);
			font-weight: bold;
			margin-bottom: 34rpx;
			& > text {
				font-size: 48rpx;
			}
		}
		.cxgm-box {
			padding: 0 86rpx;
			color: #999990;
			text-align: center;
			font-size: 28rpx;
			line-height: 50rpx;
			letter-spacing: 2rpx;
			& > text {
				color: #fa8384;
			}
		}
	}
}
</style>
